<template>
	<view class="container">
		<!-- Tab切换 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: currentTab === 'demand' }" @click="switchTab('demand')">
				买家需求
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'offer' }" @click="switchTab('offer')">
				档口报价
			</view>
		</view>
		
		<!-- 搜索框 -->
		<view class="search-box">
			<input class="search-input" 
				   v-model="searchKeyword" 
				   placeholder="搜索关键词..." 
				   @confirm="onSearch" />
			<button class="search-btn" @click="onSearch">搜索</button>
		</view>
		
		<!-- 需求列表 -->
		<view v-if="currentTab === 'demand'">
			<scroll-view class="scroll-area" 
						 scroll-y="true" 
						 @scrolltolower="loadMoreDemands"
						 refresher-enabled="true"
						 @refresherrefresh="refreshDemands"
						 :refresher-triggered="refreshing">
				<view v-for="item in demandList" :key="item.id" class="list-item">
					<view class="item-header">
						<text class="item-title">{{ item.description }}</text>
						<text class="item-time">{{ item.createTime }}</text>
					</view>
					<view class="item-content">
						<text class="item-quantity">需求量：{{ item.quantity }} {{ item.quantityUnit }}</text>
						<view v-if="item.image1" class="item-images">
							<image class="item-image" :src="item.image1" mode="aspectFill"></image>
							<image v-if="item.image2" class="item-image" :src="item.image2" mode="aspectFill"></image>
							<image v-if="item.image3" class="item-image" :src="item.image3" mode="aspectFill"></image>
						</view>
					</view>
					<view v-if="item.contactName || item.contactPhone" class="item-contact">
						<text v-if="item.contactName">联系人：{{ item.contactName }}</text>
						<text v-if="item.contactPhone">电话：{{ item.contactPhone }}</text>
					</view>
				</view>
				
				<view v-if="demandList.length === 0 && !loading" class="empty-tip">
					暂无需求信息
				</view>
				
				<view v-if="loading" class="loading-tip">
					加载中...
				</view>
			</scroll-view>
		</view>
		
		<!-- 供应列表 -->
		<view v-if="currentTab === 'offer'">
			<scroll-view class="scroll-area" 
						 scroll-y="true" 
						 @scrolltolower="loadMoreOffers"
						 refresher-enabled="true"
						 @refresherrefresh="refreshOffers"
						 :refresher-triggered="refreshing">
				<view v-for="item in offerList" :key="item.id" class="list-item">
					<view class="item-header">
						<text class="item-title">{{ item.description }}</text>
						<text class="item-time">{{ item.createTime }}</text>
					</view>
					<view class="item-content">
						<text class="item-quantity">供应量：{{ item.quantity }} {{ item.quantityUnit }}</text>
						<text class="item-price">价格：{{ item.price }}</text>
						<view v-if="item.image1" class="item-images">
							<image class="item-image" :src="item.image1" mode="aspectFill"></image>
							<image v-if="item.image2" class="item-image" :src="item.image2" mode="aspectFill"></image>
							<image v-if="item.image3" class="item-image" :src="item.image3" mode="aspectFill"></image>
						</view>
					</view>
					<view v-if="item.contactName || item.contactPhone" class="item-contact">
						<text v-if="item.contactName">联系人：{{ item.contactName }}</text>
						<text v-if="item.contactPhone">电话：{{ item.contactPhone }}</text>
					</view>
				</view>
				
				<view v-if="offerList.length === 0 && !loading" class="empty-tip">
					暂无供应信息
				</view>
				
				<view v-if="loading" class="loading-tip">
					加载中...
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { api } from '../../utils/request.js';

export default {
	data() {
		return {
			// 当前tab: demand(需求) / offer(供应)
			currentTab: 'demand',
			
			// 搜索关键词
			searchKeyword: '',
			
			// 需求列表数据
			demandList: [],
			demandPageNo: 1,
			demandHasMore: true,
			
			// 供应列表数据
			offerList: [],
			offerPageNo: 1,
			offerHasMore: true,
			
			// 加载状态
			loading: false,
			refreshing: false
		}
	},
	
	onLoad() {
		// 市场大厅页面：显示所有人可见的需求和供应列表
		// 接口：GET /api/demand/list 和 GET /api/offer/list
		this.loadDemandList();
	},
	
	onShow() {
		// 每次显示页面时刷新数据
		this.refreshCurrentTab();
	},
	
	methods: {
		// 切换tab
		switchTab(tab) {
			if (this.currentTab === tab) return;
			
			this.currentTab = tab;
			if (tab === 'demand') {
				if (this.demandList.length === 0) {
					this.loadDemandList();
				}
			} else {
				if (this.offerList.length === 0) {
					this.loadOfferList();
				}
			}
		},
		
		// 搜索
		onSearch() {
			if (this.currentTab === 'demand') {
				this.refreshDemands();
			} else {
				this.refreshOffers();
			}
		},
		
		// 刷新当前tab数据
		refreshCurrentTab() {
			if (this.currentTab === 'demand') {
				this.refreshDemands();
			} else {
				this.refreshOffers();
			}
		},
		
		// 加载需求列表
		async loadDemandList(isRefresh = false) {
			if (this.loading) return;
			if (!isRefresh && !this.demandHasMore) return;
			
			this.loading = true;
			
			try {
				const pageNo = isRefresh ? 1 : this.demandPageNo;
				const params = {
					pageNo: pageNo,
					pageSize: 10
				};
				
				if (this.searchKeyword) {
					params.keyword = this.searchKeyword;
				}
				
				const response = await api.get('/api/demand/list', params);
				const { list, total } = response;
				
				if (isRefresh) {
					this.demandList = list || [];
					this.demandPageNo = 1;
				} else {
					this.demandList = this.demandList.concat(list || []);
				}
				
				// 判断是否还有更多数据
				this.demandHasMore = this.demandList.length < total;
				if (!isRefresh) {
					this.demandPageNo++;
				}
				
			} catch (error) {
				console.error('加载需求列表失败:', error);
			} finally {
				this.loading = false;
				this.refreshing = false;
			}
		},
		
		// 加载供应列表
		async loadOfferList(isRefresh = false) {
			if (this.loading) return;
			if (!isRefresh && !this.offerHasMore) return;
			
			this.loading = true;
			
			try {
				const pageNo = isRefresh ? 1 : this.offerPageNo;
				const params = {
					pageNo: pageNo,
					pageSize: 10
				};
				
				if (this.searchKeyword) {
					params.keyword = this.searchKeyword;
				}
				
				const response = await api.get('/api/offer/list', params);
				const { list, total } = response;
				
				if (isRefresh) {
					this.offerList = list || [];
					this.offerPageNo = 1;
				} else {
					this.offerList = this.offerList.concat(list || []);
				}
				
				// 判断是否还有更多数据
				this.offerHasMore = this.offerList.length < total;
				if (!isRefresh) {
					this.offerPageNo++;
				}
				
			} catch (error) {
				console.error('加载供应列表失败:', error);
			} finally {
				this.loading = false;
				this.refreshing = false;
			}
		},
		
		// 下拉刷新需求
		refreshDemands() {
			this.refreshing = true;
			this.demandHasMore = true;
			this.loadDemandList(true);
		},
		
		// 下拉刷新供应
		refreshOffers() {
			this.refreshing = true;
			this.offerHasMore = true;
			this.loadOfferList(true);
		},
		
		// 上拉加载更多需求
		loadMoreDemands() {
			this.loadDemandList(false);
		},
		
		// 上拉加载更多供应
		loadMoreOffers() {
			this.loadOfferList(false);
		}
	}
}
</script>

<style scoped>
.search-box {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: white;
	margin-bottom: 20rpx;
}

.search-input {
	flex: 1;
	border: 2rpx solid #e1e1e1;
	border-radius: 8rpx;
	padding: 20rpx;
	margin-right: 20rpx;
}

.search-btn {
	background-color: #007aff;
	color: white;
	border: none;
	border-radius: 8rpx;
	padding: 20rpx 30rpx;
	font-size: 28rpx;
}

.scroll-area {
	height: calc(100vh - 240rpx);
}

.item-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20rpx;
}

.item-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	flex: 1;
	margin-right: 20rpx;
}

.item-time {
	font-size: 24rpx;
	color: #999;
}

.item-content {
	margin-bottom: 20rpx;
}

.item-quantity {
	font-size: 28rpx;
	color: #666;
	display: block;
	margin-bottom: 10rpx;
}

.item-price {
	font-size: 28rpx;
	color: #ff3b30;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.item-images {
	display: flex;
	gap: 10rpx;
	margin-top: 20rpx;
}

.item-image {
	width: 80rpx;
	height: 80rpx;
	border-radius: 8rpx;
}

.item-contact {
	font-size: 26rpx;
	color: #999;
}

.item-contact text {
	display: block;
	margin-bottom: 5rpx;
}

.empty-tip {
	text-align: center;
	color: #999;
	padding: 60rpx 0;
	font-size: 28rpx;
}

.loading-tip {
	text-align: center;
	color: #666;
	padding: 30rpx 0;
	font-size: 28rpx;
}
</style>